<template>
	<view class="p-20px">
		<view class="mb-20px">修改员工资料</view>
		<view>
			<view class="flex flex-y-center px-20px py-20px mb-40px bg-white rounded-50px">
				<view class="w-140px text-28px text-center">姓名:</view>
				<view class="line mr-20px mt-2px"></view>
				<view class="flex-1">
					<uv-input v-model="state.userName" border="none" placeholder="请输入" class="rounded-20px">
					</uv-input>
				</view>
			</view>

			<view class="flex flex-y-center px-20px py-20px mb-40px bg-white rounded-50px">
				<view class="w-140px text-28px text-center">电话:</view>
				<view class="line mr-20px mt-2px"></view>
				<view class="flex-1">
					<uv-input v-model="state.phone" border="none" placeholder="请输入" class="rounded-20px">
					</uv-input>
				</view>
			</view>

			<view class="flex flex-y-center px-20px py-20px mb-40px bg-white rounded-50px">
				<view class="w-140px text-28px text-center">所属分组:</view>
				<view class="line mr-20px mt-2px"></view>
				<view class="flex-1">
					<uv-input v-model="state.type" readonly border="none" placeholder="请选择" @click="showActions"
						suffixIcon='arrow-down' class="rounded-20px">
					</uv-input>
				</view>
			</view>
		</view>

		<view class="remark text-24px px-20px py-5px rounded-10px">
			备注:员工姓名尽量不要重复，电话号码请输入手机号
		</view>
		<uv-action-sheet ref="actionsRef" :actions="state.actions" @select="selectAction"></uv-action-sheet>

		<view class="mt-40px">
			<uv-button text="提交" color="black" shape="circle"></uv-button>
		</view>
	</view>
</template>

<script setup name="EmployeeManageInfo">
	import {
		ref,
		reactive,
		onMounted,
	} from 'vue';

	const actionsRef = ref()
	const state = reactive({
		userName: '',
		phone: '',
		type: '分组1',
		actions: [{
				name: '分组1',
				value: '0'
			},
			{
				name: '分组2',
				value: '1'
			},
			{
				name: '分组2',
				value: '2'
			},
		],
	})

	const showActions = () => {
		actionsRef.value.open();
	}
	const selectAction = (e, index) => {
		state.type = e.name;
	}
</script>

<style lang="scss">
	page {
		background: rgb(244, 243, 248);
	}

	.line {
		width: 1px;
		height: 40rpx;
		background: #dedede;
	}

	:deep(.uv-form-item__body__left__content__label) {
		justify-content: center !important;
	}

	.remark {
		color: rgb(225, 78, 133);
		background: rgb(255, 227, 239);
	}
</style>